<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="formInline" class="formHeight">
        <el-form-item label="关键字">
          <el-input
            v-model="formInline.name"
            size="mini"
            placeholder="请查询配置名称"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="getList">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header">
        <span>配置类型</span>
        <div class="CardButton">
          <el-button type="primary" size="mini" @click="add()">新增</el-button>
        </div>
      </div>
      <el-table
        style="width: 100%;"
        size="mini"
        row-key='id'
        :data="tableDatas"
        :tree-props="{children: 'childList', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          prop="name"
          label="配置名称"
          sortable
          align="center"
        />
        <el-table-column
          label="层级"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row.level === 1">一级</span>
              <span v-if="scope.row.level === 2">二级</span>
              <span v-if="scope.row.level === 3">三级</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="describe_before"
          label="描述"
          align="center"
        />
        <el-table-column
          label="展示描述"
          align="center"
        >
          <template slot-scope="scope">
            <div>
              <el-tag v-if="scope.row.is_describe === 0" type="danger">不展示</el-tag>
              <el-tag v-if="scope.row.is_describe === 1" type="success">展示</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="addChildren(scope.row.id)"
            >
              新增子级
            </el-button>
            <el-button
              type="warning"
              size="mini"
              @click="edit(scope.row.id)"
            >
              编辑
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--   分页   -->
      <el-pagination
        style="float: right;"
        :page-size="10"
        :current-page="formInline.offset"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <view-report-detail ref="viewReportDetail" @confirm='getList'/>
  </div>
</template>

<script>
import ViewReportDetail from '@/views/report/viewReport/components/detail'
import { reportConfigDelete, reportConfigList } from '@/api/report'
export default {
  name: 'viewReportCategory',
  components: { ViewReportDetail },
  data() {
    return {
      formInline: {
        name: '',
        limit: '10',
        offset: '0',
        order: ''
      },
      tableDatas: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.formInline.offset = val
      this.getList()
    },
    add() {
      this.$refs.viewReportDetail.open(0)
    },
    // 新增下级
    addChildren(id) {
      this.$refs.viewReportDetail.open(2, id)
    },
    getList() {
      reportConfigList(this.formInline).then(res => {
        this.tableDatas = res.data.list
        this.total = res.data.total
      })
    },
    del(id) {
      this.$confirm('是否要删除此条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        reportConfigDelete({ id: id }).then(res => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getList()
        })
      })
    },
    edit(id) {
      this.$refs.viewReportDetail.open(1, id)
    }
  }
}
</script>

<style scoped>
.formHeight{
  height: 40px;
}
</style>
